/** * @name 菜单组件 * @description: * @param * @return */
<template>
	<view class="menuList">
		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 主菜 -->
				<template v-if="key === 'main'">
					<menu-card-radio :menu="value" :type="'主菜'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 副菜 -->
				<template v-if="key === 'side'">
					<menu-card-radio :menu="value" :type="'副菜'" @checkMenu="checkMenu($event, key)" ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 青菜 -->
				<template v-if="key === 'vegetables'">
					<menu-card-radio :menu="value" :type="'青菜'" @checkMenu="checkMenu($event, key)"  ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>

		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 小食 -->
				<template v-if="key === 'staple'">
					<menu-card-radio :menu="value" :type="'小食'" @checkMenu="checkMenu($event, key)"  ref="menuCardRadio"></menu-card-radio>
				</template>
			</div>
		</div>
		<div v-for="(value, key, idxs) of menuList" :key="idxs">
			<div class="menu-group">
				<!-- 其他 -->
				<template v-if="key === 'other'">
					<menu-card-check-box :menu="value" :type="'其他'" @checkMenu="checkMenu($event, key)" ref="menuCardCheckBox"></menu-card-check-box>
				</template>
			</div>
		</div>
	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';

// import menuCard from '@/components/menuCard.vue';
import menuCardRadio from "@/components/menuCard/menuCardRadio.vue"
import menuCardCheckBox from "@/components/menuCard/menuCardCheckBox.vue"

export default {
	components: {
		// menuCard,
		menuCardRadio,
		menuCardCheckBox
	},
	props: {
		menuList: {
			//菜单列表
			type: Object | String
		},
		menuExptxt: {
			//套餐
			type: Object
		}
	},
	data() {
		return {
			checkedMenuList: '', //勾选菜单
			exptxt: this.menuExptxt, //套餐
			menuIds: this.menuId //菜单id
		};
	},
	methods: {
		checkMenu(obj, key) {
			//选择菜品
			this.checkedMenuList[key] = obj;
			console.log(obj);
		},
		createCheckedMenu(obj) {
			//创建菜单列表
			let newObj = {};
			for (let key in obj) {
				if (key !== 'other') {
					newObj[key] = { id: '', name: '', title: '', isspicy: '', price: '', pic: '' };
				} else {
					newObj[key] = [];
				}
			}
			return newObj;
		},
		clearCheckedMenuList() { //清空选中的菜单
			this.checkedMenuList = this.createCheckedMenu(this.menuList); //创建菜单列表
			this.$refs.menuCardRadio.map((item) => {
				item.clearChecked()
			})
			this.$refs.menuCardCheckBox.map((item) => {
				item.clearChecked()
			})
		
		},
	},
	created() {
		this.checkedMenuList = this.createCheckedMenu(this.menuList); //创建菜单列表
	}
};
</script>

<style></style>
